Pictures Use it to insert pictures inside the pages. The following tags can be used after IMG: SRC="url " The address to the picture-file. Note: Netscape Navigator may display its built-in icons by calling them with their names, for example . [ALT="text "] Use it to display text if the picture, by some reason, can't be loaded. Depending on your browser, the ALT-text can also be displayed while the image is loading, or when the cursor is moved over the graphic. Also, text-only browsers will display the ALT-tag instead of the image. [LOWSRC="url "] Use it to display a preview of the picture, for example a black and white picture that is smaller (and therefore will load faster than the real image). [HEIGHT="n |n %"] Changes the height of the picture in pixels or percent. Defining the height will make the page load faster. [WIDTH="n |n %"] Changes the width of the picture in pixels or percent. Defining the width will make the page load faster. [ISMAP] Defines that the picture is an imagemap. Please read the Maps-chapter for more information. [USEMAP="#anchor "] Defines that the picture is a Client-Side imagemap, newer and more useful way of defining imagemaps. USEMAP can be used together with ISMAP. If the browser does not supports Client-Side maps, ISMAP will be used instead. [BORDER="n "] Defines the width of the border around the picture in pixels. If the picture is a link, the border will be colorized. [VSPACE="n "] Define the vertical space to the text next to the picture. [HSPACE="n "] Define the horizontal space to the text next to the picture. [NAME="text "] Only useful together with external languages such as Javascript. [ALIGN="left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom"] Align the picture on the page. Left and right aligns the picture to the left resp. right side of the page. TOP puts the top side of the picture in the same height as the highest thing on the line. TEXTTOP does the same with the highest character on the line. MIDDLE aligns the picture to the center of the baseline of the textline, while ABSMIDDLE aligns it to the center of the middleline of the text.BASELINE and BOTTOM put the bottom line of the pictures on the same height as the baseline of the textline. ABSBOTTOM put it on the same height as the bottom thing on the text line, e.g. in characters like g, j etc. [DYNSRC="url "] Stands for 'dynamic source' and defines the url to a sound or a VRML-file. If the browser does not support dynamic IMG's, the standard SRC-property will be used. A sound must be in the .au, .wav or .mid-formats. VRML (Virtual Modelling Language) is a 3D standard for WWW pages. IE [CONTROLS] Defines if a DYNSRC object should display controls or not. IE [LOOP="n |infinite"] Defines the number of lopps for a DYNSRC object. INFINITE starts over until the page is closed. IE [START="[fileopen] [,mouseover]"] Defines when the DYNSRC object will start. Both parameters can be used, or just one of them. IE Java Applets ... Inserts an applet, which is a small program written in the Java-language. For more information about Java, visit sites like , , etc. This is just a short listing of some HTML-tags used to insert Java-applets. The following parameters can be used: [ALIGN="left|center|right"] Defines the alignment of the applet. HEIGHT="n |n %" WIDTH="n |n %" Defines height and width of the applet. [HSPACE="n " VSPACE="n "] Defines horizontal and vertical margins, similar to the IMG-tag. CODE="text " Defines the name of the applet. CODEBASE="url " Defines the url to the applet. Used to send parameters to the applet. Layers Layers are like many pages on the top of each others. You can make them overlap and create different effects on your pages. Using JavaScript, you can make even more powerful things with layers. ... This defines a new layer. The following parameters can be used: NS4 [NAME="text "] Defines the name of the layer, for use with external languages such as JavaScript. The first character must be alphabetical. [LEFT="n "] [TOP="n "] The topleft position of the layer, in pixels counted from the topleft of the page. By default, the layer will appear where the content of the layer should be displayed if the LAYER-tag wasn't used. Tags, for example new layers and style sheets, that are used within the LAYER-tags will use TOP and LEFT as their default topleft. [WIDTH="n |n %"] The prefered width of the layer, in pixels. If the layer contains pictures widther than this, the layer will be enlarged. If the window is too small to display the entire layer, the layer will be smaller than the specified value. [CLIP="[x1,y1,]x2,y2,..."] The inline border of the layer, defining the invisible margins between the layer and the contents of the same. x1 is the number of pixels related to the LEFT value, y1 related to the TOP value and x2 and y2 the number of pixels to the right resp. bottom of the layer. If x1 and y1 are not specified, they will default to 0. [Z-INDEX="n " | ABOVE="layer " | BELOW="layer "] These properties, only one can be used at a time, defines the stacking order of the layers. ABOVE and BELOW are self-explained, defining the next or previous layer in the stacking order. The value 'layer' is the name of an already created layer. Z-INDEX is a number which will be used to sort the layers. Layers with high Z-INDEX values are shown above layers with low numbers. [VISIBILITY="show|hide|inherit"] This property defines if the layer content should be visible, use show, or not, use hide. By default, it is set to inherit which is the same visibilty as the parent layer. [BGCOLOR="color "] Defines the background color of the layer. This will also make the layer opaque, which means that none of the underlaying objects will be visible. [BACKGROUND="url "] The url of a picture that will be shown as a background, overriding the BGCOLOR property. The background picture can be transparent. Embedded Objects This tag is used to include objects that requires a plug-in, for example, a QuickTime movie or a MIDI music sequence. You may need different parameters depending on which type of object you may use, but WIDTH and HEIGHT can be used most of the times. In the Read me-files for the plug-in, you can learn about how to include the plug-in on a page. Embedded objects was introduced in Netscape 2.0. ... If the browser does nott support plug-ins, text within the tag will be displayed. A good idea would be to put a link to the embedded file here. <HYPE> This is a Netscape-joke that only works on the MacOS-versions. Not an embedded object actually. NS - FAQ: More on picture formats Most graphics on the net are in the GIF or JPEG-formats. There is also a new, powerful format named PNG ("ping") that is defined in HTML 4, though it is not yet supported in the main browsers. Other pictures may need a helper application or a special plug-in to be viewed. GIF, Graphic Interchange Format, is developed by Compuserve. There are two version, Gif87 and Gif89a. A GIF-picture can have a maximum of 256 different colors. Gif89a-pictures can be transparent, which means that one of these colors is invisible. They can also be interlaced, which means that the picture is displayed while it's loading. Finally, it is possible to animate GIF-pictures to make simple animations that does not require any plug-ins or helper applications. Because of a bug, Netscape Navigator 2.0 will not display GIF-animations with a transparent color properly. JPEG is an abbreviation of Joint Photographers Expert Group. The format allows pictures with more than 256 colors in different quality modes. Differently from the GIF-format, JPEG-pictures will remove parts of the graphic to make it smaller. Unless you don't use a very low quality, you won't see any difference though. Just like GIF's, there are interlaced JPEG's, called Progressive JPEG's. These are not supported in Netscape Navigator 1.1 and earlier. A photo would usually be compressed using JPEG, while icons and images that needs to be transparent should be GIF-compressed graphics. Photoshop <http://www.adobe.com> is the leading software for image-editing. Graphic Converter <http://www.lemkesoft.de> is a good shareware alternative, and Gif Builder <http://iawww.epfl.ch/staff/yves.piguet/clip2GIF-home/GIFbuilder.html> is one of many programs for making animated GIF's. Also see the Colors-section of the Appendix for information on colors and "web-savvy" palettes.